<template>
    <div class="literature">
        <div class="item" v-for="(item,index) of literature" :key="index">
            <span>{{ index+'  ' +item}}</span>
            <el-divider></el-divider>
        </div>
        <div class="border"></div>
        <div class="important">
          <div class="important-title">
            <div class="icon">2020</div>
            <div class="desc">重要文献</div>
          </div>
          <div class="important-content">
            <ul>
              <li class="content-item" v-for="(item,index) of list" :key = "index">{{item}}</li>
            </ul>
          </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'd',
  data () {
    return {
      list: [
        '杨宇焰 《僵尸企业的识别标准、形成原因、及对策研究 》中国建设银行四川省分行协办，2016 年 第 6 期',
        '孔繁成  《中国僵尸企业测度分析》产业与科技论坛 2019年第18卷第13期',
        '朱鹤  何帆 《中国僵尸企业数量测度及特征分析》北京工商大学学报 第 31卷'
      ]
    }
  },
  methods: {
    getinfo () {
    //   alert('123')
      this.literature = this.$store.state.literature
    //   console.log(this.literature)
    }
  },
  mounted () {
    this.getinfo()
  }
}
</script>

<style lang="stylus" scoped>
    .literature{
        color: black
    }
    .border{
    margin-top: .5rem;
    border-bottom: .2rem solid black;
  }
  .important{
    margin-top .4rem;
  }
    .important-title{
      font-size: .5rem;
      display: flex;
    }
      .icon{
        height: .8rem;
        line-height .8rem;
        width 2.5rem;
        border: 1px solid black;
        margin-right .5rem;
        background: #ccc;
      }
      .desc{
        height: .8rem;
        line-height .8rem;
      }
    .important-content{
      width 100%;
      text-align left;
    }
      .content-item{
        text-align left;
        font-size: .4rem;
        margin-top .5rem;
        font-weight bold;
      }
</style>
